import React, { Component } from 'react';
import { Form, Select, Input, Button, Modal, InputNumber } from 'antd';
import Tips from '../../Tips/index';
const FormItem = Form.Item;
const Option = Select.Option;
const { TextArea } = Input;

class chainCodeBox extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputdata: [],
      List: ''
    };
  }
  onchange = (ev) => {

  }
  inputdata = (i, type, ev) => {
    var inputdata = this.state.inputdata;
    inputdata.length = this.props.data.args.length;
    inputdata[i] = type == 'number' ? ev : ev.target.value;
    this.setState({ inputdata: inputdata });
  }
  componentWillReceiveProps(nextp) {
    if (nextp.data != this.props.data) {
      this.setState({ inputdata: [], List: '' });
    }
  }
  argd = (ev) => {

  }
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        var inputdata = this.state.inputdata;
        var onoff = false;
        var num = 0;
        inputdata.forEach((e, i) => {
          num++;
          if (!e) onoff = true;
        });
        if (onoff || num != inputdata.length || inputdata.length == 0) {
          this.setState({
            message: '请完整填写数据！'
          }, () => {
            setTimeout(() => {
              this.setState({
                message: ''
              });
            }, 1000);
          });
        } else {
          this.props.onCreate(inputdata, this.props.data.chaincodename, this.props.data.key);
        }
        console.log('Received values of form: ', values);
      }
    });
  }
  render() {
    const { visible, onCancel, onCreate } = this.props;
    const { getFieldDecorator } = this.props.form;
    var List = this.state.List;
    if (this.props.data && this.props.data.args) {
      List = this.props.data.args.map((e, i) => {
        if (e.type == 'number') {
          return (<InputNumber defaultValue="" className="inputchaincode" placeholder="请输入数据值" onChange={this.inputdata.bind(this, i, e.type)} key={i} />);
        } else {
          return (<Input defaultValue="" className="" placeholder="请输入数据" onChange={this.inputdata.bind(this, i, e.type)} key={i} />);
        }
      });
    }
    return (
      <Modal
        visible={visible}
        title={this.props.data ? this.props.data.desc : ''}
        onCancel={onCancel}
        closable={false}
        footer={[
          <Button key="back" onClick={onCancel}>取消</Button>,
          <Button key="submit" type="primary" onClick={this.handleSubmit}>
            立即提交
          </Button>
        ]}
      >
        <Form>
          <FormItem
            label="名称"
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 16 }}
          >
            <Input disabled={true} value={this.props.data ? this.props.data.chaincodename : ''} />
          </FormItem>
          <FormItem
            label="argd"
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 16 }}
          >
            <Select value={this.props.data ? this.props.data.key : ''} onChange={this.argd} >
              <Option value={this.props.data ? this.props.data.key : ''}>{this.props.data ? this.props.data.key : ''}</Option>
            </Select>
          </FormItem>
          <FormItem
            label={this.props.data ? this.props.data.desc : ''}
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 16 }}
          >
            {getFieldDecorator('dataName', {
              rules: [{ required: true, message: '请输入数据!' }],
            })(
              <div className="">
                {List}
              </div>
            )}
          </FormItem>
        </Form>
        <Tips message={this.state.message} />
      </Modal>
    );
  }
}

const ChainCodeBox = Form.create()(chainCodeBox);
export default ChainCodeBox;
